<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片视频下载器</title>
    <style>
        /* 弹出窗口样式 - 图片视频下载器 */

        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 根变量 */
        :root {
            --primary-color: #2196F3;
            --primary-dark: #1976D2;
            --success-color: #4CAF50;
            --warning-color: #FF9800;
            --error-color: #f44336;
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-disabled: #999999;
            --background-primary: #ffffff;
            --background-secondary: #f5f5f5;
            --border-color: #e0e0e0;
            --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
            --border-radius: 8px;
            --transition: all 0.3s ease;
        }

        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-primary);
            background: var(--background-primary);
            width: 400px;
            min-height: 500px;
            max-height: 600px;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        /* 弹出窗口容器 */
        .popup-container {
            display: flex;
            flex-direction: column;
            min-height: 500px;
            max-height: 600px;
            width: 100%;
        }

        /* 头部样式 */
        .popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            box-shadow: var(--shadow-light);
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-icon {
            width: 24px;
            height: 24px;
            border-radius: 4px;
        }

        .header-title h1 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .header-actions {
            display: flex;
            gap: 8px;
        }

        /* 按钮样式 */
        .btn-icon {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-icon:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .btn-icon svg {
            width: 18px;
            height: 18px;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-primary:disabled {
            background: var(--text-disabled);
            cursor: not-allowed;
        }

        .btn-secondary {
            background: var(--background-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
        }

        .btn-secondary:hover:not(:disabled) {
            background: var(--border-color);
        }

        .btn-secondary:disabled {
            color: var(--text-disabled);
            cursor: not-allowed;
        }

        /* 扫描状态 */
        .scan-status {
            padding: 16px 20px;
            background: var(--background-secondary);
            border-bottom: 1px solid var(--border-color);
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .status-text {
            color: var(--text-secondary);
            font-size: 13px;
        }

        /* 媒体统计 */
        .media-stats {
            display: flex;
            padding: 16px 20px;
            gap: 24px;
            background: white;
            border-bottom: 1px solid var(--border-color);
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .stat-number {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* 媒体容器 */
        .media-container {
            flex: 1;
            overflow-y: auto;
            padding: 0 20px;
        }

        .media-section {
            margin-bottom: 24px;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .section-header h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .section-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* 复选框样式 */
        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .checkbox-container input[type="checkbox"] {
            display: none;
        }

        .checkmark {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-color);
            border-radius: 3px;
            position: relative;
            transition: var(--transition);
        }

        .checkbox-container input[type="checkbox"]:checked+.checkmark {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .checkbox-container input[type="checkbox"]:checked+.checkmark::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* 媒体列表 */
        .media-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
            max-height: 300px;
            overflow-y: auto;
        }

        .media-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            position: relative;
        }

        .media-item:hover {
            box-shadow: var(--shadow-light);
            transform: translateY(-2px);
        }

        .item-checkbox {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;
        }

        .item-checkbox .checkmark {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(4px);
        }

        .item-preview {
            position: relative;
            width: 100%;
            height: 120px;
            overflow: hidden;
            background: var(--background-secondary);
        }

        .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .preview-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--background-secondary);
            color: var(--text-disabled);
        }

        .preview-placeholder svg {
            width: 48px;
            height: 48px;
        }

        .preview-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

        .media-item:hover .preview-overlay {
            opacity: 1;
        }

        .preview-btn {
            color: white;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

        .preview-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .item-info {
            padding: 12px;
        }

        .item-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item-details {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .item-size,
        .item-format,
        .item-duration {
            font-size: 11px;
            color: var(--text-secondary);
            background: var(--background-secondary);
            padding: 2px 6px;
            border-radius: 3px;
        }

        .item-actions {
            display: flex;
            gap: 4px;
        }

        .action-btn {
            color: var(--text-secondary);
            padding: 6px;
            border-radius: 4px;
        }

        .action-btn:hover {
            background: var(--background-secondary);
            color: var(--primary-color);
        }

        .action-btn svg {
            width: 16px;
            height: 16px;
        }

        /* 下载进度 */
        .download-progress {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid var(--border-color);
            box-shadow: var(--shadow-medium);
            z-index: 1000;
            max-height: 200px;
            overflow-y: auto;
        }

        .progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .progress-header h4 {
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

        .progress-list {
            padding: 12px 20px;
        }

        .progress-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .progress-item:last-child {
            border-bottom: none;
        }

        .progress-info {
            flex: 1;
            min-width: 0;
        }

        .progress-filename {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .progress-status {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .progress-bar {
            width: 80px;
            height: 4px;
            background: var(--background-secondary);
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--primary-color);
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .progress-actions {
            display: flex;
            gap: 4px;
        }

        .progress-btn {
            color: var(--text-secondary);
            padding: 4px;
        }

        .progress-btn:hover {
            color: var(--primary-color);
        }

        /* 底部操作栏 */
        .popup-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 20px;
            background: var(--background-secondary);
            border-top: 1px solid var(--border-color);
            margin-top: auto;
        }

        .popup-footer .btn-primary {
            flex: 1;
            justify-content: center;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--background-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .media-item {
            animation: fadeIn 0.3s ease;
        }

        /* 状态样式 */
        .media-item.selected {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
        }

        .media-item.downloading {
            border-color: var(--warning-color);
        }

        .media-item.completed {
            border-color: var(--success-color);
        }

        .media-item.error {
            border-color: var(--error-color);
        }

        /* 加载状态 */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .empty-state svg {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .empty-state p {
            font-size: 13px;
            line-height: 1.4;
        }

        /* 响应式设计 */
        @media (max-width: 400px) {
            body {
                width: 100%;
            }

            .media-list {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            .popup-footer {
                flex-direction: column;
                gap: 12px;
            }

            .popup-footer .btn-primary {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <!-- 主容器 -->
    <div class="popup-container">
        <!-- 头部 -->
        <div class="popup-header">
            <div class="header-title">
                <img src="../icons/icon32.png" alt="图标" class="header-icon">
                <h1>图片视频下载器</h1>
            </div>
            <div class="header-actions">
                <button class="btn-icon" id="settingsBtn" title="设置">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- 扫描状态 -->
        <div class="scan-status" id="scanStatus">
            <div class="status-indicator">
                <div class="spinner" id="scanSpinner"></div>
                <span class="status-text">正在扫描页面媒体...</span>
            </div>
        </div>

        <!-- 媒体统计 -->
        <div class="media-stats" id="mediaStats">
            <div class="stat-item">
                <span class="stat-number" id="imageCount">0</span>
                <span class="stat-label">图片</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="videoCount">0</span>
                <span class="stat-label">视频</span>
            </div>
        </div>

        <!-- 媒体列表容器 -->
        <div class="media-container">
            <!-- 图片区域 -->
            <div class="media-section" id="imageSection">
                <div class="section-header">
                    <h3>图片</h3>
                    <div class="section-actions">
                        <label class="checkbox-container">
                            <input type="checkbox" id="selectAllImages">
                            <span class="checkmark"></span>
                            全选
                        </label>
                        <button class="btn-secondary" id="downloadImagesBtn" disabled>
                            下载选中 (<span id="selectedImageCount">0</span>)
                        </button>
                    </div>
                </div>
                <div class="media-list" id="imageList">
                    <!-- 图片列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 视频区域 -->
            <div class="media-section" id="videoSection">
                <div class="section-header">
                    <h3>视频</h3>
                    <div class="section-actions">
                        <label class="checkbox-container">
                            <input type="checkbox" id="selectAllVideos">
                            <span class="checkmark"></span>
                            全选
                        </label>
                        <button class="btn-secondary" id="downloadVideosBtn" disabled>
                            下载选中 (<span id="selectedVideoCount">0</span>)
                        </button>
                    </div>
                </div>
                <div class="media-list" id="videoList">
                    <!-- 视频列表将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>

        <!-- 下载进度 -->
        <div class="download-progress" id="downloadProgress" style="display: none;">
            <div class="progress-header">
                <h4>下载进度</h4>
                <button class="btn-icon" id="closeProgressBtn">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                    </svg>
                </button>
            </div>
            <div class="progress-list" id="progressList">
                <!-- 下载进度项将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="popup-footer">
            <button class="btn-primary" id="scanBtn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                </svg>
                扫描媒体
            </button>
            <button class="btn-secondary" id="historyBtn">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" />
                </svg>
                历史
            </button>
        </div>
    </div>

    <script src="popup.js"></script>
</body>

</html>